<template>
  <el-dialog
    v-model="dialogVisible"
    title="执行历史"
    width="70%"
    :before-close="handleClose"
  >
    <div class="execution-history">
      <!-- 执行统计 -->
      <el-card class="mb-16">
        <template #header>
          <span>执行统计</span>
        </template>
        <el-row :gutter="16">
          <el-col :span="6">
            <el-statistic title="总执行次数" :value="5" />
          </el-col>
          <el-col :span="6">
            <el-statistic title="成功次数" :value="4">
              <template #suffix>
                <span style="color: #67c23a">(80%)</span>
              </template>
            </el-statistic>
          </el-col>
          <el-col :span="6">
            <el-statistic title="失败次数" :value="1">
              <template #suffix>
                <span style="color: #f56c6c">(20%)</span>
              </template>
            </el-statistic>
          </el-col>
          <el-col :span="6">
            <el-statistic title="平均耗时" :value="156" suffix="秒" />
          </el-col>
        </el-row>
      </el-card>

      <!-- 执行列表 -->
      <el-card>
        <template #header>
          <div class="flex-between">
            <span>执行记录</span>
            <el-button size="small" @click="refreshData">
              <el-icon><Refresh /></el-icon>
              刷新
            </el-button>
          </div>
        </template>
        
        <el-table :data="executionList" stripe>
          <el-table-column label="执行ID" prop="id" width="80" />
          
          <el-table-column label="状态" width="100">
            <template #default="{ row }">
              <el-tag :type="getStatusTagType(row.status)" size="small">
                {{ getStatusLabel(row.status) }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column label="开始时间" width="180">
            <template #default="{ row }">
              {{ formatTime(row.startTime) }}
            </template>
          </el-table-column>

          <el-table-column label="结束时间" width="180">
            <template #default="{ row }">
              {{ formatTime(row.endTime) }}
            </template>
          </el-table-column>

          <el-table-column label="耗时" width="100">
            <template #default="{ row }">
              {{ formatDuration(row.duration) }}
            </template>
          </el-table-column>

          <el-table-column label="触发方式" width="100">
            <template #default="{ row }">
              <el-tag size="small" :type="row.triggerType === 'manual' ? 'warning' : 'info'">
                {{ row.triggerType === 'manual' ? '手动' : '定时' }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="100">
            <template #default="{ row }">
              <el-button type="primary" size="small" @click="viewDetail(row)">
                查看详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>

    <template #footer>
      <el-button @click="handleClose">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed } from 'vue'
import { formatTime, formatDuration } from '@/utils/date'

const props = defineProps({
  modelValue: Boolean,
  workflowId: [String, Number]
})

const emit = defineEmits(['update:modelValue'])

const executionList = ref([
  {
    id: 1001,
    status: 'success',
    startTime: new Date(Date.now() - 3600000),
    endTime: new Date(Date.now() - 3400000),
    duration: 200,
    triggerType: 'scheduled'
  },
  {
    id: 1000,
    status: 'success',
    startTime: new Date(Date.now() - 7200000),
    endTime: new Date(Date.now() - 7000000),
    duration: 180,
    triggerType: 'manual'
  },
  {
    id: 999,
    status: 'failed',
    startTime: new Date(Date.now() - 10800000),
    endTime: new Date(Date.now() - 10700000),
    duration: 100,
    triggerType: 'scheduled'
  }
])

const dialogVisible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const refreshData = () => {
  // 刷新数据
  console.log('刷新执行历史数据')
}

const viewDetail = (execution) => {
  // 查看执行详情
  console.log('查看执行详情:', execution)
}

const handleClose = () => {
  dialogVisible.value = false
}

const getStatusLabel = (status) => {
  const labels = {
    'success': '成功',
    'failed': '失败',
    'running': '运行中',
    'cancelled': '已取消'
  }
  return labels[status] || status
}

const getStatusTagType = (status) => {
  const types = {
    'success': 'success',
    'failed': 'danger',
    'running': 'primary',
    'cancelled': 'warning'
  }
  return types[status] || 'info'
}
</script>

<style scoped>
.execution-history {
  max-height: 60vh;
  overflow-y: auto;
}
</style> 